<template>
    <!-- 列表底部功能区 -->
    <div class="list-footer">
        <!-- 标签 -->
        <div class="left">
            <div class="label" v-for="item in articleFooter.tags" :key="item.id">
                <img src="https://vue-wj.oss-cn-beijing.aliyuncs.com/icon/%E6%A0%87%E7%AD%BE_1.png">
                <p>{{ item.label }}</p>
            </div>
        </div>
        <!-- 图标 -->
        <div class="right">
            <div class="icon">
                <img src="https://vue-wj.oss-cn-beijing.aliyuncs.com/icon/%E5%96%9C%E6%AC%A2.png">
                <p>{{ articleFooter.articlesLikes.length }}</p>
            </div>
            <div class="icon">
                <img src="https://vue-wj.oss-cn-beijing.aliyuncs.com/icon/%E7%95%99%E8%A8%80.png">
                <p>{{ articleFooter.articlesComments.length }}</p>
            </div>
            <div class="icon">
                <img src="https://vue-wj.oss-cn-beijing.aliyuncs.com/icon/%E8%89%B2%E5%9D%97%EF%BC%8D%E6%96%87%E6%9C%AC%E6%9F%A5%E7%9C%8B.png">
                <p>{{ articleFooter.viewCount }}</p>
            </div>
        </div>
    </div>
</template>

<script setup>
defineProps({
    articleFooter: {
        type: Object,
        default: () => ({})
    }
})
</script>

<style lang="scss" scoped>
.list-footer {
    height: 45px;
    line-height: 45px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;

    @media (max-width: 768px) {
        height: auto;
        padding: 8px 0;

        .left {
            width: 100%;
            justify-content: flex-start;
            gap: 8px;
            
            .label {
                gap: 4px;
                
                img {
                    width: 20px;
                    height: 20px;
                }
                
                p {
                    font-size: 14px;
                }
            }
        }

        .right {
            width: 100%;
            justify-content: flex-start;
            gap: 16px;

            .icon {
                gap: 4px;

                img {
                    width: 20px;
                    height: 20px;
                }

                p {
                    font-size: 14px;
                }
            }
        }
    }

    // 标签
    .left {
        flex: 1;
        display: flex;
        gap: 10px;

        .label {
            display: flex;
            align-items: center;
            gap: 5px;

            img {
                width: 24px;
                height: 24px;
            }
        }
    }

    // 图标
    .right {
        display: flex;
        gap: 20px;

        .icon {
            display: flex;
            align-items: center;
            gap: 5px;

            img {
                width: 24px;
                height: 24px;
            }
        }
    }
}
</style>